<template>
  <section class="app-inner">
    <el-row :gutter="20">
      <el-col :span="7">
        <el-card class="box-card">
          <device-tree :expandedList="expandedList" @deviceClick="deviceClick"></device-tree>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card class="table-card">
          <section class="table-btn">
            <el-button v-if="checkAuthority('/building/add')" @click="handleAdd" type="primary" icon="plus">添加</el-button>
          </section>
          <div>
            <el-form ref="form" :model="checkDeviceData" label-width="100px">
              <el-form-item label="类型">
                <el-input readonly disabled v-model="checkDeviceData.tagName"></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input readonly disabled v-model="checkDeviceData.name"></el-input>
              </el-form-item>
              <el-form-item label="图片">
                <el-image
                  v-if="checkDeviceData.mapUrl"
                  style="width: 100%; height: 300px"
                  :src="checkDeviceData.mapUrl"
                  fit="fill"
                ></el-image>
                <span v-else style="color: #ccc">请上传图片</span>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <building-modal ref="BuildingModal" @ok="modalOk"></building-modal>
  </section>
</template>

<script>
import { buildTypeList } from '@/views/children/dcenter/js/constants'
import BuildingModal from './components/BuildingModal'
import DeviceTree from './components/DeviceTree'
import { getImgSource } from '@/views/children/safety/js/device'
import { Message } from 'element-ui'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限

export default {
  name: 'BuildingManage',
  data () {
    return {
      checkDeviceData: {},
      expandedList: []
    }
  },
  components: { BuildingModal, DeviceTree },

  methods: {
    checkAuthority,
    // 树编辑和查看回调
    async deviceClick (data, type) {
      if (type === 1) {
        this.$refs.BuildingModal.edit(data)
      }
      if (type === 2) {
        this.checkDeviceData = data
        if (data.mapUrl) {
          if (this.checkDeviceData.mapUrl.slice(0, 4) !== 'blob') {
            const resImg = await getImgSource(this.checkDeviceData.mapUrl)
            let blob = new Blob([resImg], {
              type: resImg.type
            })
            let url = window.URL.createObjectURL(blob)
            this.checkDeviceData.mapUrl = url
          } else {
            this.imgUrl = data.mapUrl
          }
        } else {
          Message({
            type: 'warning',
            duration: 1000,
            message: '暂无图片,请上传图片！'
          })
          // this.$message.warning('暂无图片,请上传图片！')
        }
        // this.editForm.mapUrl = url
        // this.imgUrl = data
        // console.log(this.checkDeviceData)
        let tagName = this.$base.constFormatter(buildTypeList, this.checkDeviceData.tag)
        this.$set(this.checkDeviceData, 'tagName', tagName)
      }
    },

    // 新增按钮
    handleAdd () {
      this.$refs.BuildingModal.add()
    },

    // CU回调
    modalOk (val) {
      this.checkDeviceData = {}
      this.expandedList = val.split(';').map(Number)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  flex: 1;
  height: 100%;
}
.box-card {
  height: 100%;
}
.el-col {
  height: 100%;
}
.el-card {
  height: 100%;
  margin-bottom: 0px;
  /deep/ .el-card__body {
    height: 100%;
  }
}
.el-form {
  width: 500px;
  padding-left: 50px;
}
.el-message--error {
  width: 100%;
}
</style>
